<template>
	<div>
		<div class='user-headPortrait-bg'>
			<div class='user-headPortrait'><img src='static/img/user-default.png' alt='用户头像' class='user_img'><div class='color-white ft14 mt15'>欢迎您，新用户</div></div>
		</div>
		<ul class='homeNav'>
			<li class='one'><router-link to='/about#1'>公司简介</router-link></li>
			<li class='two'><router-link to='/about#2'>服务介绍</router-link></li>
			<li class='three'><router-link to='/about#3'>联系我们</router-link></li> 
		</ul>
		<dl class='contain mt15 '> 
			<dt class="contain-title border-b-1"><span>重点推荐</span></dt>
			<dd style="overflow: auto;">
				<ul class='clear recommend_across'  :style='{width: recommend_acrossWidth}'>
					<li class='contain-main ' v-for='(item,index) in recommendData'>
						<router-link :to='{path:"/productDetail",query:{code:item.code}}'>
							<dl>
								<dt>{{item.name}}</dt>
								<dd class='mt5'>
									<span style="color: #ff9203">{{item.size | Num_splitby_thresscomma}}</span> <br>
									<span class='ft12'>规模（万）</span>
								</dd>
								<dd class='mt5'>
									<span class='color-yellow'>{{item.startingAmt | Num_splitby_thresscomma}}</span> <br>
									<span class='ft12'>起投金额（万）</span>
								</dd>
							</dl>

						</router-link>
					</li> 
					<span class='getMore' @click='gotoList' v-if='recommendData.length>0'>查看更多</span>
					<span v-else>暂无推荐，查看<router-link to='/product' style='text-decoration: underline;'>全部产品</router-link></span>
					
				</ul> 
			</dd>
		</dl>
		<div class='login_out'>
			<a-button style='width: 100%;background-color: #1e49a5;height: 0.4rem;' class='color-white' @click='loginOut'>退出登录</a-button>
		</div>
		
	</div>
</template>

<script >
	import { productList }  from  '@/api/home/index'
	export default{
		name:'userCenter',
		data(){
			return {
				spinning:false,
				recommendData:[],
				recommend_acrossWidth:'100%',
			}
		},
		created(){
			this.pageInit()
		},
		methods:{
			pageInit(){  
				this.spinning = true 
				let list = new Promise((resolve,reject)=>{
		  	 		productList({isRecommend:'1'}).then((res)=>{
		  	 			if(res.data.flag == true){
		  	 				resolve(res.data)
		  	 			}
		  	 			else{
		  	 				reject()
		  	 			}
		  	 		})
		  	 	})
  
				Promise.all([list]).then((res)=>{  
					this.recommendData = res[0].dataList 
					this.recommend_acrossWidth = (res[0].totalRs)*50+'%'
					// this.data = this.data.concat(res[1].dataList) 
					// this.hasNext = res[1].hasNext
					// this.totalNum = res[1].totalRs
					this.spinning = false
				}).catch((err)=>{
					console.log(err)
					this.spinning = false
				}) 
			},
			gotoList(){
				this.$router.push('/product')
			},
			loginOut(){
				sessionStorage.clear()

				this.$store.commit('token',null)
				this.$store.commit('footerShow',true)
				this.$store.commit('temporary_input','') 

				this.$router.push('/login')
			}
		}
	}
</script>

<style scoped="scoped">
	.user-headPortrait-bg{height: 1.25rem;background:url(../../assets/img/user-bg.png) no-repeat center;display: table;width: 100%;text-align: center;}
	.user-headPortrait{display: table-cell;width: 0.5rem;vertical-align: middle;}
	.user_img{width: 0.5rem;height: 0.5rem;border-radius: 50%;}

	.homeNav{background:#fff;padding: 0.15rem ;display: table;width: 100%;margin-top: 0.15rem}
	.homeNav li {display: table-cell;width: 33%;text-align: center;}
	.homeNav li a{display:inline-block;width: 100%;padding-top: 0.35rem; font-size: 0.12rem}
	.homeNav li.one {background:url(../../assets/img/about_company.png) no-repeat top center/0.25rem 0.25rem;}
	.homeNav li.two {background:url(../../assets/img/about_service.png) no-repeat top center/0.25rem 0.25rem;}
	.homeNav li.three {background:url(../../assets/img/about_contact.png) no-repeat top center/0.25rem 0.25rem;}

	.recommend_across {padding: 0.1rem 0.15rem;}
	.recommend_across li{float: left;margin-right:0.15rem;text-align: center;line-height: 1.5;box-shadow: 0 0.02rem 0.08rem rgba(3,19,38,0.1);width: 1.5rem;}
	.getMore{display: inline-block;height: 1.3rem;line-height: 1.3rem;}

	.login_out{margin: 0.5rem 0;padding: 0 0.15rem;position: absolute;bottom: 0.4rem;width: 100%;}
</style>